'use client';
import React from 'react';
import { Typography, Card, Row, Col } from 'antd';
import { HomeOutlined, UserOutlined, FileTextOutlined, CommentOutlined } from '@ant-design/icons';
import Link from 'next/link';

const { Title } = Typography;

// 快捷功能卡片数据
const quickActions = [
  {
    title: '用户管理',
    description: '管理用户账号和权限',
    icon: <UserOutlined />,
    link: '/users',
    color: '#1890ff'
  },
  {
    title: '文章管理',
    description: '管理博客文章内容',
    icon: <FileTextOutlined />,
    link: '/article',
    color: '#52c41a'
  },
  {
    title: '评论管理',
    description: '审核和管理用户评论',
    icon: <CommentOutlined />,
    link: '/comment',
    color: '#faad14'
  },
  {
    title: '系统设置',
    description: '配置系统参数',
    icon: <HomeOutlined />,
    link: '/dashboard',
    color: '#722ed1'
  }
];

export default function DashboardPage() {
  return (
    <div className="p-6">
      <Title level={2}>欢迎使用后台管理系统</Title>
      
      <div className="mt-6">
        <Title level={4}>快捷操作</Title>
        <Row gutter={[16, 16]}>
          {quickActions.map((action, index) => (
            <Col xs={24} sm={12} lg={6} key={index}>
              <Link href={action.link}>
                <Card 
                  hoverable 
                  className="h-full text-center"
                  bodyStyle={{ padding: '24px 16px' }}
                >
                  <div 
                    className="text-3xl mb-3" 
                    style={{ color: action.color }}
                  >
                    {action.icon}
                  </div>
                  <h3 className="text-lg font-semibold mb-2">{action.title}</h3>
                  <p className="text-gray-600 text-sm">{action.description}</p>
                </Card>
              </Link>
            </Col>
          ))}
        </Row>
      </div>

      <div className="mt-8">
        <Card title="系统概览">
          <p>这里是系统概览信息，可以展示统计数据、最近活动等。</p>
          <p className="mt-2 text-gray-500">请点击上方快捷操作进入具体功能模块。</p>
        </Card>
      </div>
    </div>
  );
}
